<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>charset control</title>
		<style type="text/css">
			.btn {
				display: inline-block;
				padding: 6px 12px;
				margin-bottom: 0;
				font-size: 14px;
				font-weight: 400;
				line-height: 1.42857143;
				text-align: center;
				white-space: nowrap;
				vertical-align: middle;
				-ms-touch-action: manipulation;
				touch-action: manipulation;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				background-image: none;
				border: 1px solid transparent;
				border-radius: 4px
			}
			.btn-primary {
				color: #fff;
				background-color: #337ab7;
				border-color: #2e6da4
			}
			
			.btn-primary.focus,
			.btn-primary:focus {
				color: #fff;
				background-color: #286090;
				border-color: #122b40
			}
			
			.btn-primary:hover {
				color: #fff;
				background-color: #286090;
				border-color: #204d74
			}
			
			.btn-primary.active,
			.btn-primary:active,
			.open>.dropdown-toggle.btn-primary {
				color: #fff;
				background-color: #286090;
				border-color: #204d74
			}
			
			.btn-primary.active.focus,
			.btn-primary.active:focus,
			.btn-primary.active:hover,
			.btn-primary:active.focus,
			.btn-primary:active:focus,
			.btn-primary:active:hover,
			.open>.dropdown-toggle.btn-primary.focus,
			.open>.dropdown-toggle.btn-primary:focus,
			.open>.dropdown-toggle.btn-primary:hover {
				color: #fff;
				background-color: #204d74;
				border-color: #122b40
			}
			
			.btn-primary.active,
			.btn-primary:active,
			.open>.dropdown-toggle.btn-primary {
				background-image: none
			}
			
			.btn-primary.disabled.focus,
			.btn-primary.disabled:focus,
			.btn-primary.disabled:hover,
			.btn-primary[disabled].focus,
			.btn-primary[disabled]:focus,
			.btn-primary[disabled]:hover,
			fieldset[disabled] .btn-primary.focus,
			fieldset[disabled] .btn-primary:focus,
			fieldset[disabled] .btn-primary:hover {
				background-color: #337ab7;
				border-color: #2e6da4
			}
			
			.btn-primary .badge {
				color: #337ab7;
				background-color: #fff
			}
			
			.btn-default {
				color: #333;
				background-color: #fff;
				border-color: #ccc
			}
			
			.btn-default.focus,
			.btn-default:focus {
				color: #333;
				background-color: #e6e6e6;
				border-color: #8c8c8c
			}
			
			.btn-default:hover {
				color: #333;
				background-color: #e6e6e6;
				border-color: #adadad
			}
			
			.btn-default.active,
			.btn-default:active,
			.open>.dropdown-toggle.btn-default {
				color: #333;
				background-color: #e6e6e6;
				border-color: #adadad
			}
			
			.btn-default.active.focus,
			.btn-default.active:focus,
			.btn-default.active:hover,
			.btn-default:active.focus,
			.btn-default:active:focus,
			.btn-default:active:hover,
			.open>.dropdown-toggle.btn-default.focus,
			.open>.dropdown-toggle.btn-default:focus,
			.open>.dropdown-toggle.btn-default:hover {
				color: #333;
				background-color: #d4d4d4;
				border-color: #8c8c8c
			}
			
			.btn-default.active,
			.btn-default:active,
			.open>.dropdown-toggle.btn-default {
				background-image: none
			}
			
			.btn-default.disabled.focus,
			.btn-default.disabled:focus,
			.btn-default.disabled:hover,
			.btn-default[disabled].focus,
			.btn-default[disabled]:focus,
			.btn-default[disabled]:hover,
			fieldset[disabled] .btn-default.focus,
			fieldset[disabled] .btn-default:focus,
			fieldset[disabled] .btn-default:hover {
				background-color: #fff;
				border-color: #ccc
			}
			
			.btn-default .badge {
				color: #fff;
				background-color: #333
			}
			
			.form-control {
				display: block;
				width: 100%;
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.42857143;
				color: #555;
				background-color: #fff;
				background-image: none;
				border: 1px solid #ccc;
				border-radius: 4px;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
				-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
				transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
			}
			
			.form-control:focus {
				border-color: #66afe9;
				outline: 0;
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
			}	
			#content{
				width: 800px;
				height: 320px;
				padding: 10px;
				margin: 50px auto;
				border: 1px solid #ccc;
			}
			#txt{
				width: 400px;
				/* border: 1px solid red; */
				height: 300px;
				padding: 30px 0;		
			}
			#bt{
				width: 320px;
			}
			#content>div{
				
				float: left;
			}
			
			input[type="text"]{
				width: 150px;
				float: left;
				margin: 0 10px 0 50px;
			}
			#bt button{
				display: block;
				width: 100px;
				height: 100px;
			}
			
			#bt>button{
				margin: auto;
			}
			#bt>button:nth-last-of-type(3){
				float: left;
			}
			#bt>button:nth-last-of-type(2){
				float: right;
			}
			#bt>button:nth-last-of-type(1){
				clear: both;
			}
			#wrap{
			    position: relative;
			    height: 200px;
			}
			#wrap span{
				margin-top: 20px;
			    position: absolute;
			    width: 7px;
			    height: 7px;
			    border: 1px solid red;
				background-color: #e74c3c;
				box-shadow: 0px 0px 10px #e74c3c;
			}
			
			@font-face {font-family: "iconfont";
			  src: url('iconfont.eot?t=1605186443427'); /* IE9 */
			  src: url('iconfont.eot?t=1605186443427#iefix') format('embedded-opentype'), /* IE6-IE8 */
			  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANEAAsAAAAACNwAAAL1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDGgqEMINGATYCJAMUCwwABCAFhG0HgSkbmwdRlKzFLNmXmIqMrFe6SxQQIYwDrOMB8MzIAW3nojLkexePf5ET1h4A4qHaD317txckhyQjw+14Qh1VI4BVK2SVA1KkO7WAwv/BmzsCD/iLbOLn2Qs044iiuMDamrM4MmYRZiinCBX6Qv73pfTS/EjNKQcYtgVGeQJBShf89Od+lcB7CssGLtFpCY93w+gfwlGJkqKSxK5f/3PMdFE6sPw22gSGkhlWBTROSqBdFx4dWTw/Qb9h7CbKg3ifwIA5Ajy7Pd+cjgQuC8RtoyOnkwpJqSH7tD0l96Z4rukrT8tHjmf85+OfaXQoWgWuPXe6SZ35T/5U/Xd2iyKIx3NAe4iKHUASN0pdl/hhagc24DAGNgApm37yruMnoRax1n94RZVED6AaErFHyjwnMaYT/KR0Cj+ZUT1RsSh5GZUNDIy09oCIpC4C6gp9QxyNjufbd3H/IZ2/lONnIijkQJD8Tdt3QyzwSZxKdtnihkZGBtimyzRjEX1GLPGDRB5Uf00A8qABABHFR/Gr0B/elw8YRWEisacomZhPtO9eDLnBTY9d/blz4l42/isrwP4lshIeUyxfBNSB/+Tj2oe9BzWIuQffHjH80u6f6h30KT3E/1TccihdKTC3tFuxyC5vFmHelcEAjNI5wDfhG0cz3TpB6EuJNSh6zULVZwWZ2B1oBu1Cjz6HMGCbf3jQpMUX2Y8tpwBhzAXFiJdQjbmRiX2hmfFDj7HwYcCVmHzmoLUwvTOMkWAK8RdMQpVCVukF1RfUtog4KeWkB3JjojAZjrPZHVbIY9zQvPRURIFiKmErfAyLgqBmyjCR4VOkno1GquyLhgmVTs8ZDEUESoHgC3QJUlF0tujlvv8CaVYhwjVtHeYHxBrmcGAppgVyp6patV3LZ7YXbeogFFAwUgJOcKACpggY5WdlUEIMtR6J2oyWxpW2quH8mvIZz8EA8JIWJWpktOgxexpV+mMI4WsVWRAWsoMMX5yyX2Nonka3PQWkWzn5s+Q4AAA=') format('woff2'),
			  url('iconfont.woff?t=1605186443427') format('woff'),
			  url('iconfont.ttf?t=1605186443427') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			  url('iconfont.svg?t=1605186443427#iconfont') format('svg'); /* iOS 4.1- */
			}
			
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 30px;
			  color: #204D74;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
			
			.icon-fangxiangyuanjiantou-xiangyou:before {
			  content: "\e617";
			}
			
			.icon-fangxiangyuanjiantou-xiangshang:before {
			  content: "\e618";
			}
			
			.icon-fangxiangyuanjiantou-xiangxia:before {
			  content: "\e619";
			}
			
			.icon-fangxiangyuanjiantou-xiangzuo:before {
			  content: "\e61a";
			}
			
		</style>
	</head>
	<body>
		<div id="content">
			<div id="txt">
				<div id="tx">
					<input type="text" id="text" oninput="LED()" class="form-control" placeholder="please input" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
					<button class="btn btn-default" type="button" onclick="submit()">submit</button>
					<div id="wrap"></div>
				</div>
			</div>
			<div id="bt">
				<button type="button" class="btn btn-default icon iconfont" onclick="fun('','top')">&#xe618;</button>
				<button type="button" class="btn btn-default icon iconfont" onclick="fun('','left')">&#xe61a;</button>
				<button type="button" class="btn btn-default icon iconfont" onclick="fun('','right')">&#xe617;</button>
				<button type="button" class="btn btn-default icon iconfont" onclick="fun('','down')">&#xe619;</button>
			</div>
		</div>
		
	</body>

	<script type="text/javascript">
		//define method
		function fun(txt,direction) {
			//create core object
			var xmlhttp;
			if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest();
			} else { // code for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//create connect
			if(txt==''){
				xmlhttp.open("get", "http://localhost:8000/?direction=" + direction, true);
			}
			if(direction==''){
				xmlhttp.open("get", "http://localhost:8000/?txt=" + txt, true);
			}
			//send request
			xmlhttp.send();
		}
		
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var cols = 16;
		var rows = 16;
		function lattice(txt){
		    cols = txt.length * 16
		    canvas.width = cols;
		    canvas.height = rows;
		    ctx.clearRect(0,0,cols,rows);
		    ctx.font = "16px SimSun";
		    ctx.fillStyle = "#000";
		    ctx.fillText(txt, 0, 14);
		    var data = ctx.getImageData(0, 0, cols, rows)
		    var len = data.data.length;
		    var res = '';
		    for(var i = 1; i <= rows; i++){
		        for(var j = 1; j <= cols; j++){
		            var pos = (( i-1 )*cols+( j ))*4 -1;
		            if(data.data[pos] > 0){
		                res += `<span class="black" style="left: ${j*10}px;top: ${i*10}px"></span>`
		            }
		        }
		    }
		    wrap.innerHTML = res;
		}
		function draw(){
		    var txt = text.value;
		    if(txt){
		        lattice(txt);
		    }
		} 
		function LED(){
			var s = document.getElementById("text").value
			if(s.charCodeAt()>=1000){
				draw()
			}
		}
		function submit(){
			var s = document.getElementById("text").value
			fun(s,'')
		}
	</script>
	
	
</html>
